<template>
  <div>
    <el-card>
      <template #header>
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-button size="small" type="primary" @click="addagentsBtn">添加经纪</el-button>
          </el-col>

          <el-col>
            <el-input v-model="name_contains" placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="searchFn" />
            </el-input>
          </el-col>
        </el-row>
      </template>

      <el-table :data="agentsListShow" row-key="id">
        <el-table-column label="图片" prop="image" width="200px">
          <template v-slot="{row}">
            <img
              v-imgErr="require('@/assets/common/bigUserHeader.png')"
              :src="row.image"
              style="width:160px"
            >

          </template>

        </el-table-column>
        <el-table-column label="名称" prop="name" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="地址" prop="address" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="success" size="small" @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :page-size="limit"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>

    </el-card>
    <Addagents
      ref="Addagents"
      :show-dialog.sync="visibleDialog"
      @closeEvent="visibleDialog=false"
      @updateEvent="getagentsList"
    />
  </div>
</template>

<script>
import { agentsList, DeleteAgents, AgentsNumber, SerchAgents } from '@/api/agents'
import Addagents from './components/Addagents.vue'
export default {

  components: { Addagents },
  data() {
    return {
      visibleDialog: false,
      agentsListShow: [],
      total: 0, // 默认员工总数量
      limit: 5, // 每页请求数量 size _limit
      start: 0, // _start
      name_contains: '' // name_contains
    }
  }, created() {
    this.getagentsList()
    this.getAgentsNumber()
  },
  methods: {

    // 编辑
    async editFn(id) {
      this.visibleDialog = true
      // 获取部门详情--数据回显
      this.$refs.Addagents.getAgentsById(id)
    },

    //  模糊搜索
    async searchFn(name_contains) {
      const res = await SerchAgents({
        _limit: this.limit,
        // _start: this.start,
        name_contains: this.name_contains
      })
      // console.log(res)
      this.agentsListShow = res.data
      this.getAgentsNumber()
    },

    // 删除
    async delFn(id) {
      this.$confirm('是否确定删除？', '提示', {
        type: 'warning'
      }).then(async() => {
        // 调用接口
        await DeleteAgents(id)

        if (this.agentsListShow.length === 1 && this.start !== 1) {
          this.start -= 2
        }

        this.getagentsList()
      }).catch((err) => {
        console.log('点击了取消', err)
      })
    },
    // 分页  页码发送改变时触发
    currentChange(page) {
      this.start = (page - 1) * this.limit
      this.getagentsList()
    },
    // 添加经纪 按钮
    addagentsBtn() {
      this.visibleDialog = true
      this.getagentsList()
    },
    // 渲染列表？
    async getagentsList() {
      const res = await agentsList({
        _limit: this.limit,
        _start: this.start
      })
      this.agentsListShow = res.data
      this.getAgentsNumber()
    },
    // 获取员工总数量
    async getAgentsNumber() {
      const res = await AgentsNumber({ name_contains: this.name_contains })
      this.total = res.data
    }
  }
}
</script>
<style>
</style>
